import React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Edit, Trash2, GitBranch, MapPin } from "lucide-react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { MoreHorizontal } from "lucide-react";

export default function TensionSectionCard({ section, projectName, getTowerNumber, crossingPoints, onEdit, onDelete }) {
  const sectionCrossingPoints = crossingPoints.filter(cp => 
    section.associatedCrossingPointIds && section.associatedCrossingPointIds.includes(cp.id)
  );

  return (
    <Card className="hover:shadow-lg transition-shadow duration-300">
      <CardHeader className="pb-3">
        <div className="flex items-start justify-between">
          <div className="flex-1">
            <CardTitle className="text-lg font-bold text-gray-900 flex items-center gap-2">
              <GitBranch className="w-5 h-5 text-purple-600" />
              {section.name}
            </CardTitle>
            <p className="text-sm text-gray-500 mt-1">{projectName}</p>
          </div>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="ghost" size="icon">
                <MoreHorizontal className="w-4 h-4" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem onClick={() => onEdit(section)}>
                <Edit className="w-4 h-4 mr-2" />
                编辑
              </DropdownMenuItem>
              <DropdownMenuItem onClick={() => onDelete(section.id)} className="text-red-500">
                <Trash2 className="w-4 h-4 mr-2" />
                删除
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
      </CardHeader>
      
      <CardContent className="space-y-3">
        <div className="grid grid-cols-2 gap-3 text-sm">
          <div>
            <span className="text-gray-500">起始塔：</span>
            <span className="font-medium text-gray-900">
              {getTowerNumber(section.startTensionTowerId)}
            </span>
          </div>
          <div>
            <span className="text-gray-500">结束塔：</span>
            <span className="font-medium text-gray-900">
              {getTowerNumber(section.endTensionTowerId)}
            </span>
          </div>
        </div>

        {section.intermediateTowerIds && section.intermediateTowerIds.length > 0 && (
          <div className="text-sm">
            <span className="text-gray-500">中间杆塔：</span>
            <span className="font-medium text-gray-900">
              {section.intermediateTowerIds.length} 个
            </span>
          </div>
        )}

        {section.totalLength && (
          <div className="text-sm">
            <span className="text-gray-500">总长度：</span>
            <span className="font-medium text-gray-900">{section.totalLength.toFixed(1)} m</span>
          </div>
        )}

        {section.calculatedRulingSpan && (
          <div className="text-sm">
            <span className="text-gray-500">代表档距：</span>
            <span className="font-medium text-gray-900">{section.calculatedRulingSpan.toFixed(1)} m</span>
          </div>
        )}

        {sectionCrossingPoints.length > 0 && (
          <div>
            <div className="text-sm text-gray-500 mb-2 flex items-center gap-1">
              <MapPin className="w-3 h-3" />
              跨越点 ({sectionCrossingPoints.length})
            </div>
            <div className="flex flex-wrap gap-1">
              {sectionCrossingPoints.slice(0, 3).map(cp => (
                <Badge key={cp.id} variant="outline" className="text-xs">
                  {cp.name}
                </Badge>
              ))}
              {sectionCrossingPoints.length > 3 && (
                <Badge variant="outline" className="text-xs">
                  +{sectionCrossingPoints.length - 3}
                </Badge>
              )}
            </div>
          </div>
        )}

        {section.description && (
          <div className="text-sm text-gray-600 line-clamp-2 mt-2">
            {section.description}
          </div>
        )}
      </CardContent>
    </Card>
  );
}